<template>
  <div>
    <van-cell is-link title="基础用法" @click="show = true" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      description="这是一段描述信息"
      close-on-click-action
    />
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三',subname: '描述信息' }],
    };
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    onCancel () {
      Toast('取消');
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
